<template>
    <div class="edge-container" :style="{top:top,left:left}">
        <svg :width="width" :height="height" xmlns="http://www.w3.org/2000/svg"
        >
            <circle :cx="cx" :cy="cy" r="3" :fill="color"></circle>
            <polyline :points="points" fill="none" :stroke="color" :stroke-width="strokeWidth"></polyline>
            <path :d="d" :stroke="color" :fill="color"></path>
        </svg>
    </div>

</template>

<script>
    const BORDER = 4;
    export default {
        props: {
            edge: {type: Object, required: true},
            //node_width node_height node_right node_bottom current_top current_left next_top next_left
            color: {
                type: String, default: () => {
                    return 'hsl(' + parseInt(Math.random() * 360) + ', 100%, 40%)'
                }
            },
            strokeWidth: {type: Number, default: BORDER / 2}
        }, data() {
            return {
                random_offset_x: (Math.random() - 0.5) * this.edge.node_bottom / 2,
                random_offset_y: (Math.random() - 0.5) * this.edge.node_height / 2,
            }
        }, computed: {
            _rawPoints() {
                let lines = [];
                let edge = this.edge;//为了缩短拼写
                lines.push([edge.current_left, edge.current_top]);
                let sameColumn = () => {//在同一列
                    return edge.next_left === edge.current_left;
                };
                let afterRow = () => {//在之后的步骤
                    return edge.next_top > edge.current_top;
                };
                let nextRow = () => {// 同一步骤或下一个步骤
                    return edge.next_top - edge.current_top <= edge.node_bottom;
                };
                if (sameColumn() && afterRow() && nextRow()) {
                    //下一个步骤，且本步骤没有换行
                } else if (afterRow() && nextRow()) {
                    //同一个步骤，但有换行的情况，不在同一列，且仅下一行
                    //双折线
                    let fold = edge.next_top - Math.min(edge.next_top - edge.current_top, edge.node_bottom) / 2;
                    lines.push([edge.current_left, fold]);
                    lines.push([edge.next_left, fold]);
                } else {
                    //四折线
                    let fold1 = edge.current_top + edge.node_bottom / 2;
                    lines.push([edge.current_left, fold1]);
                    let fold2 = edge.current_left + edge.node_width / 2 + edge.node_right / 2 + this.random_offset_x;
                    lines.push([fold2, fold1]);
                    let fold3 = edge.next_top - edge.node_bottom / 2 + this.random_offset_y;
                    lines.push([fold2, fold3]);
                    lines.push([edge.next_left, fold3]);
                }
                lines.push([edge.next_left, this.edge.next_top]);
                return lines;
            }, _points() {
                return _.map(this._rawPoints, (item) => {
                    return [item[0] - this._left + BORDER, item[1] - this._top + BORDER]
                });
            },
            top() {
                return this._top - BORDER - BORDER + 'px';
            }, left() {
                return this._left - BORDER + 'px';
            }, _top() {
                return _.min(_.map(this._rawPoints, 1))
            }, _left() {
                return _.min(_.map(this._rawPoints, 0))
            }, _bottom() {
                return _.max(_.map(this._rawPoints, 1))
            }, _right() {
                return _.max(_.map(this._rawPoints, 0))
            }, width() {
                return this._right - this._left + BORDER * 2;
            }, height() {
                return this._bottom - this._top + BORDER * 2;
            }, cx() {
                return _.head(this._points)[0];
            }, cy() {
                return _.head(this._points)[1];
            }, points() {
                return _.map(this._points, (item) => {
                    return item.join(',')
                }).join(' ');
                //SAMPLE:4,124 4,146.5 122.9035765769172,146.5 122.9035765769172,4 224,4 224,44
            }, d() {
                let path = [];
                let last = _.last(this._points);
                let lastX = last[0];
                let lastY = last[1];
                path.push([lastX, lastY]);
                path.push([lastX + this.strokeWidth * 2, lastY - this.strokeWidth * 4]);
                path.push([lastX, lastY - this.strokeWidth * 4 * 0.618]);
                path.push([lastX - this.strokeWidth * 2, lastY - this.strokeWidth * 4]);
                path.push([lastX, lastY]);

                let str = _.map(path, (item) => {
                    return item.join(',')
                }).join(' L');
                return 'M' + str;
                //SAMPLE:M224,44 L228,36 L224,39.056 L220,36 L224,44
            }
        }
        , created() {
            console.log(this.edge);
        }
    }
</script>

<style scoped>
    .edge-container {
        position: absolute;
        z-index: 1;
    }
</style>